<template>
  <div v-on:click="mych()" class="tab-bar-item">
    <div class="icon">
      <slot v-if="!isActive" name="item-icon"></slot>
      <slot v-else name="item-icon-active"></slot>
    </div>
    <div :class="isActiveText" >
      <slot name="item-text"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "TabBarItem",
  props: {
    path: {
      type: String,
      default: "home",
    },
  },
  computed:{
      isActive:function(){
        //   console.log(this.$route.path+":::"+this.path);
          return this.$route.path.includes(this.path)
      },
      isActiveText:function(){
          return {
              text:this.$route.path.includes(this.path)
          }
      }
  },
  methods: {
    mych() {
      //   模拟在浏览器地址栏中输入了路由地址
      if(this.$route.path !== this.path)    this.$router.push(this.path);
      //   改变isActive的值,但是原来选择的没有变回去
    //   this.isActive = true;
    },
  } 
};
</script>

<style scoped>
.tab-bar-item {
  flex: 1;
  text-align: center;
  height: 49px;
  font-size: 10px;
}

.tab-bar-item img {
  margin-top: 4px;
  margin-bottom: 2px;
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.tab-bar-item .text{
    color:red;
}
</style>